<template>
    <div class="header-search-wrap">
        <div class="left-content">
            <el-form :model="formData" inline>
                <el-form-item label="授权ID">
                    <el-input
                        class="w150"
                        v-model.trim="formData.authId"
                        maxlength="200"
                        placeholder="请输入"
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="应用说明">
                    <el-input
                        class="w150"
                        v-model.trim="formData.explain"
                        maxlength="200"
                        placeholder="请输入"
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="组件类型">
                    <el-select
                        class="w100"
                        v-model="formData.appTypeId"
                        placeholder="请选择">
                        <el-option
                            v-for="item in componentTypeList"
                            :key="item.id"
                            :label="item.orgName"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                 <el-form-item label="付费类型">
                    <el-select
                        class="w100"
                        v-model="formData.acquireType"
                        placeholder="请选择">
                        <el-option
                            v-for="item in paymentTypeList"
                            :key="item.id"
                            :label="item.orgName"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="服务状态">
                    <el-select
                        class="w100"
                        v-model="formData.expireState"
                        placeholder="请选择">
                        <el-option
                            v-for="item in serviceStatusList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间">
                    <DateRange
                        ref="dateRangeRef"
                        :start-time="formData.startTime"
                        :end-time="formData.endTime"/>
                </el-form-item>
            </el-form>
        </div>
        <div class="right-content">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="clear">重置</el-button>
        </div>
    </div>
</template>

<script setup>
import DateRange from '@/components/date-range.vue';
import { ref, defineEmits, defineExpose } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

let emit = defineEmits(['search']);

// 应用筛选信息
const formData = ref({
    authId: '',
    explain: '',
    appTypeId: '',
    acquireType: '',
    expireState: '',
    startTime: '2022-08-12 00:00:00',
    endTime: '2022-08-18 00:00:00'
})

// 组件类型下拉框数据
const componentTypeList = ref([]);

// 付费类型下拉框数据
const paymentTypeList = ref([])

// 服务状态下拉框数据
const serviceStatusList = ref([]);

const dateRangeRef = ref(null);

// 搜索
function search () {
    emit('search');
}

// 重置筛选条件
function clear () {
    Object.keys(formData.value).forEach(key => {
        formData.value[key] = '';
    })
    dateRangeRef.value.resetDateRange();
    emit('search');
}

// 获取筛选参数
function getFilterInfo () {
    let timeInfo = dateRangeRef.value.getDateRange();
    return {
        ...formData.value,
        ...timeInfo
    };
}

defineExpose({
    getFilterInfo
});

</script>

<style lang="scss" scoped>
.header-search-wrap {
    display: flex;
    flex-wrap: wrap;
    .left-content {
        flex: 1;
    }
    .right-content {
        width: 132px;
    }
    .w150 {
        width: 150px;
    }
    .w100 {
        width: 100px;
    }
}
</style>